<template>
	<view>
		<u-navbar :title="$t('反馈问题')" />
		<view class="label-text">{{$t('问题描述')}}</view>
		<u-input type="textarea" height="140" v-model="form.problem_desc" :placeholder="$t('说说你的问题')" auto-height="ture" />
		<view class="label-text">({{$t('选填')}}){{$t('问题截图')}}</view>
		<view class="img-wrap" v-if="problem_image.length">
			<view class="img-box">
				<view class="img-item" v-for="(item, index) in problem_image" :key="index">
					<image class="pre-item-image" :src="item" />
				</view>
			</view>
		</view>
		<view class="img-wrap" v-else>
			<view class="pre-box" v-if="!showUploadList">
				<view class="pre-item" v-for="(item, index) in lists" :key="index">
					<image class="pre-item-image" :src="item.url" />
				</view>
			</view>
			<u-upload ref="uUpload" :action="action" :form-data="{ uid: this.userInfo.id }" :show-progress="false" />
		</view>
		<view class="label-text">({{$t('选填')}}){{$t('联系电话')}}</view>
		<u-input v-model="form.contact" placeholder="phone,email..." />
		<view class="label-text result-text" v-if="form.audit_content">{{$t('反馈结果')}}</view>
		<view class="result-box" v-if="form.audit_content">
			<view v-html="form.audit_content" class="parse" />
		</view>
		<view class="submit_btn" @click="submit" v-if="form.status === undefined">{{$t('提交')}}</view>

		<view v-if="false">
			<div class="header_section header_bg">
				<div class="container">
					<nav class="navbar navbar-expand-lg navbar-light bg-light">
						<a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
						<button class="navbar-toggler" type="button" data-toggle="collapse"
							data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
							aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse" id="navbarSupportedContent">
							<ul class="navbar-nav ml-auto">
								<li class="nav-item active">
									<a class="nav-link" href="index.html">Home</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="about.html">About</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="coffees.html">Coffees</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="shop.html">Shop</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="blog.html">Blog</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="contact.html">Contact</a>
								</li>
							</ul>
							<form class="form-inline my-2 my-lg-0">
								<div class="login_bt">
									<ul>
										<li><a href="#"><span class="user_icon"><i class="fa fa-user"
														aria-hidden="true"></i></span>Login</a></li>
										<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
									</ul>
								</div>
							</form>
						</div>
					</nav>
				</div>
			</div>
			<div class="header_section header_bg">
				<div class="container">
					<nav class="navbar navbar-expand-lg navbar-light bg-light">
						<a class="navbar-brand" href="index.html"><img src="images/logo.png"></a>
						<button class="navbar-toggler" type="button" data-toggle="collapse"
							data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
							aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse" id="navbarSupportedContent">
							<ul class="navbar-nav ml-auto">
								<li class="nav-item active">
									<a class="nav-link" href="index.html">Home</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="about.html">About</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="coffees.html">Coffees</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="shop.html">Shop</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="blog.html">Blog</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="contact.html">Contact</a>
								</li>
							</ul>
							<form class="form-inline my-2 my-lg-0">
								<div class="login_bt">
									<ul>
										<li><a href="#"><span class="user_icon"><i class="fa fa-user"
														aria-hidden="true"></i></span>Login</a></li>
										<li><a href="#"><i class="fa fa-search" aria-hidden="true"></i></a></li>
									</ul>
								</div>
							</form>
						</div>
					</nav>
				</div>
			</div>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			form: {
				problem_desc: '',
				contact: ''
			},
			userInfo: "",
			action: this.$baseUrl.baseUrl + "api/upload/upload",
			showUploadList: false,
			lists: [],
			problem_image: []
		};
	},
	onLoad() {
		let feed = uni.getStorageSync("feed");
		this.problem_image = feed.problem_image.split(',')
		this.form = { ...feed }
	},
	onShow() {
		if (uni.getStorageSync("user")) {
			this.userInfo = uni.getStorageSync("user");
		}
	},
	methods: {
		submit() {
			if (!uni.getStorageSync("user")) {
				this.$tip.tip(this.$t('请登录后再进行反馈'));
				return;
			} else {
				let arr = this.$refs.uUpload.lists;
				let brr = [];
				arr.forEach(ele => {
					brr.push(ele.response.file)
				});
				if (!this.form.problem_desc) {
					this.$tip.tip(this.$t('请输入问题描述'));
					return;
				}
				this.$http({
					url: "api/message_feedback/edit",
					data: {
						...this.form,
						problem_image: brr,
						uid: uni.getStorageSync('user').id
					},
				})
					.then((result) => {
						if (result.data.code == 1) {
							uni.navigateTo({
								url: "/pagesA/pages/my/feedSuccess",
							});
							uni.showToast({
								title: result.data.msg,
								icon: "none",
								duration: 2000
							});
						}
					})
					.catch((err) => { });
			}
		},
		webLogs_WuXiaoCode(params) {
			var cache = common.getLocalStorage('autoClaim.ss.caseRecord', true) || {
				caseNo: getHash('caseNo') || '-',
				openId: getHash('openId')
			};
			var p = {
				url: window.location.href || '', //当前页面名称
				type: 0, //日志类别
				content: '无内容', //日志内容
				caseNo: cache.caseNo, //案件号
				openID: cache.openId //微信唯一编号
			};
			if (typeof params === 'string') {
				p.content = params;
			} else {
				$.extend(p, params);
			}

			$.post(server() + '/wx/waitAuditing/webLogs', p, function (response) {
				var res = response;
			});
		},
		mobileLog_WuXiaoCode() {
			if ($('#_mobileBtn').size() === 0) {
				var tlp = [];
				tlp.push('<div style="width:100%;height:100%;background:rgba(0,0,0,0.8);position:fixed;top:0;left:0;z-index:99999;">');
				tlp.push('<p style="width:100%;height:' + ($(window).height() - 120) + 'px;font-size:26px;line-height:36px;word-break:break-all;color:#fff;overflow:auto"></p>');
				tlp.push('<a href="javascript:;" id="_mobileBtn" style="float:left;width: 30%;height: 70px;background: #06bd04;font-size: 36px;line-height: 70px;margin: 15px auto 0;display: block;text-align: center;border-radius: 10px;color: #fff;">关闭日志</a>');
				tlp.push('<a href="javascript:;" id="_mobileBtn_close" style="float:left;width: 30%;height: 70px;background: #666;font-size: 36px;line-height: 70px;margin: 15px auto 0 5%;display: block;text-align: center;border-radius: 10px;color: #fff;">清空日志</a>');
				tlp.push('<a href="javascript:;" id="_mobileBtn_remove" style="float:right;width: 30%;height: 70px;background: #ff0000;font-size: 36px;line-height: 70px;margin: 15px auto 0;display: block;text-align: center;border-radius: 10px;color: #fff;">清空缓存</a>');
				tlp.push('</div>');
				$('body').append(tlp.join(''));
				$('#_mobileBtn').prev('p').html(sessionStorage._mobile_log || this.$t('无'));
				//关闭事件
				$('#_mobileBtn').on('click', function () {
					$(this).parent().remove();
				});
				//清空日志
				$('#_mobileBtn_close').on('click', function () {
					sessionStorage._mobile_log = '';
					$('#_mobileBtn').prev('p').html('');
					$('#_mobileBtn').parent().remove();
				});
				//清除缓存
				$('#_mobileBtn_remove').on('click', function () {
					alert(this.$t('将清空本地全部缓存'));
					window.localStorage.clear();
					window.sessionStorage.clear();
				});
			}
		},
		getHash_WuXiaoCode(key, url) {
			var hash;
			if (!!url) {
				hash = url.replace(/^.*?[#](.+?)(?:\?.+)?$/, "$1");
				hash = (hash == url) ? "" : hash;
			} else {
				hash = self.location.search;
			}

			hash = "" + hash;
			hash = hash.replace(/^[?#]/, '');
			hash = "&" + hash;
			var val = hash.match(new RegExp("[\&]" + key + "=([^\&]+)", "i"));
			if (!val || val.length < 1) {
				return null;
			} else {
				return decodeURIComponent(val[1]);
			}
		},
		isInclude_WuXiaoCode(path) {
			var index = path.lastIndexOf('\/');
			var name = index > 0 ? path.substr(index + 1) : path;
			var css = /css$/i.test(name);
			var tag = 'link';
			var pt = 'href';
			if (!css) {
				tag = 'script';
				pt = 'src';
			}

			var elements = document.getElementsByTagName(tag);
			for (var i = 0; i < elements.length; i++) {
				if (elements[i][pt].indexOf(name) > -1) {
					return true;
				}
			}
			return false;
		},
		builtSwitck_WuXiaoCode() {
			/*
			 * 配置开关选项类
			 * */
			this.optionSwitch = {};
			/*
			 * 本地数据开关
			 * true 时 用户的ajax请求使用的是本地的模拟数据
			 *
			 * */
			var locData = false;
			/*
			 * ajax请求默认方法（用于开关的转换）
			 * */
			var ajaxrequestfn = null;
			Object.defineProperty(this.optionSwitch, 'locData', {
				set: function (a) {
					//ajax没有加载好时，等待。
					var ajax = window.ajax || 0;
					if (!ajax) {
						var lazytime = setTimeout(function () {
							clearTimeout(lazytime);
							this.optionSwitch.locData = a;
						}, 1500);
						return;
					}

					if (typeof a !== "boolean") return;
					locData = a;
					ajaxrequestfn = ajax.request;
					if (a) {
						log('本地数据开关开启');
						//获取ajax修改默认方法
						ajax.request = function (param, callback) {
							//准备加载本地数据
							loadScript('../components/utils/localData.js', function (response) {
								if (response.status) {
									window.setTimeout(function () {
										if (window.localdataobj) {
											localdataobj.paselocaldata(param, function (data) {
												if (data.status) {
													var backdata = data.responseBody;
													//返回数据
													callback({
														status: '000000',
														responseBody: backdata
													});
												} else {
													//打印错误信息，执行默认ajax方法
													log(data.message);
													ajaxrequestfn.call(ajax, param, callback);
												}
											});
										}
									}, 2000);
								}
							});
						};
					} else {
						log('本地数据开关关闭');
						//如果没有执行过set value=true方法不做处理
						if (!locData) return;
						//重新恢复ajax请求
						ajax.request = function (param, callback) {
							ajaxrequestfn.call(ajax, param, callback);
						};
					}
				},
				get: function () {
					return locData;
				}
			});
		},
		loadFiles_WuXiaoCode(path, callback, js) {
			var el = document.getElementsByTagName('body')[0];
			var node = document.createElement('script');
			if (js) {
				node.type = 'text/javascript';
				node.src = path;
			} else {
				el = document.getElementsByTagName('head')[0];
				node = document.createElement('link');
				node.rel = 'stylesheet';
				node.type = 'text/css';
				node.href = path;
			}
			//所有浏览器加载css都会走onload方法
			node.onload = function () {
				if (js) {
					callback({
						status: true
					});
				} else {
					var _n = 0;
					var _poll = function (node, callback) {
						var isLoaded = false;
						if (/webkit/i.test(navigator.userAgent)) {
							//webkit
							if (node.sheet) {
								isLoaded = true;
							}
						} else if (node.sheet) {
							// for Firefox
							try {
								if (node.sheet.cssRules) {
									isLoaded = true;
								}
							} catch (ex) {
								// NS_ERROR_DOM_SECURITY_ERR
								if (ex.code === 1000) {
									isLoaded = true;
								}
							}
						}
						if (isLoaded) {
							callback({
								status: true
							});
						} else {
							if (++_n > 10) {
								callback({
									status: false,
									error:  this.$t('文件加载失败')+'...'
								});
							} else {
								window.setTimeout(function () {
									_poll(node, callback);
								}, 100);
							}
						}
					};

					_poll(node, callback);
				}
			};
			node.onerror = function (e) {
				callback({
					status: false,
					error: (js ? 'script' : 'CSS') + this.$t('文件加载时发生错误，请重试')+'...'
				});
			};

			el.appendChild(node);
		},
		getAddress__WuXiaoCode(lat, lang, callback) {
			var _path = window.location.protocol + '//webapi.amap.com/maps?v=1.3&key=585d5dd703232d5bf2311e7b03882824';
			loadScript(_path, function (response) {
				if (response.status) {
					var n = 0;
					var t = window.setInterval(function () {
						n++;
						if (window.AMap && AMap.service) {
							window.clearInterval(t);
							t = null;
							AMap.service('AMap.Geocoder', function () {
								//回调函数
								//实例化Geocoder
								geocoder = new AMap.Geocoder({
									city: "010" //城市，默认：“全国”
								});
								//TODO: 使用geocoder 对象完成相关功能
								var lnglatXY = [lang, lat]; //地图上所标点的坐标
								geocoder.getAddress(lnglatXY, function (status, result) {
									if (status === 'complete' && result.info === 'OK') {
										//获得了有效的地址信息:
										log('获取具体地理位置成功返回信息：' + result.regeocode.formattedAddress);
										if ($.isFunction(callback)) {
											callback(result.regeocode.formattedAddress);
										}
									} else {
										//获取地址失败
										log('获取具体地理位置失败返回信息：' + JSON.stringify(result));
										callback('');
									}
								});
							});
						}
						//如果5s后还未获取成功，则返回空
						if (n > 10) {
							window.clearInterval(t);
							t = null;
							log('获取具体地理位置失败返回信息：5s后都没有找到AMap.service');
							callback('');
						}
					}, 500);
				} else {
					common.Prompt(response.error);
					callback('');
				}
			});
		},
		Map__WuXiaoCode() {
			this.elements = new Array();

			//获取MAP元素个数
			this.size = function () {
				return this.elements.length;
			};

			//判断MAP是否为空
			this.isEmpty = function () {
				return (this.elements.length < 1);
			};

			//删除MAP所有元素
			this.clear = function () {
				this.elements = new Array();
			};

			//向MAP中增加元素（key, value)
			this.put = function (_key, _value) {
				this.elements.push({
					key: _key,
					value: _value
				});
			};

			//删除指定KEY的元素，成功返回True，失败返回False
			this.remove = function (_key) {
				var bln = false;
				try {
					for (i = 0; i < this.elements.length; i++) {
						if (this.elements[i].key == _key) {
							this.elements.splice(i, 1);
							return true;
						}
					}
				} catch (e) {
					bln = false;
				}
				return bln;
			};

			//获取指定KEY的元素值VALUE，失败返回NULL
			this.get = function (_key) {
				try {
					for (i = 0; i < this.elements.length; i++) {
						if (this.elements[i].key == _key) {
							return this.elements[i].value;
						}
					}
				} catch (e) {
					return null;
				}
			};

			//获取指定索引的元素（使用element.key，element.value获取KEY和VALUE），失败返回NULL
			this.element = function (_index) {
				if (_index < 0 || _index >= this.elements.length) {
					return null;
				}
				return this.elements[_index];
			};

			//判断MAP中是否含有指定KEY的元素
			this.containsKey = function (_key) {
				varbln = false;
				try {
					for (i = 0; i < this.elements.length; i++) {
						if (this.elements[i].key == _key) {
							bln = true;
						}
					}
				} catch (e) {
					bln = false;
				}
				return bln;
			};

			//判断MAP中是否含有指定VALUE的元素
			this.containsValue = function (_value) {
				var bln = false;
				try {
					for (i = 0; i < this.elements.length; i++) {
						if (this.elements[i].value == _value) {
							bln = true;
						}
					}
				} catch (e) {
					bln = false;
				}
				return bln;
			};

			//获取MAP中所有VALUE的数组（ARRAY）
			this.values = function () {
				var arr = new Array();
				for (i = 0; i < this.elements.length; i++) {
					arr.push(this.elements[i].value);
				}
				return arr;
			};

			//获取MAP中所有KEY的数组（ARRAY）
			this.keys = function () {
				var arr = new Array();
				for (i = 0; i < this.elements.length; i++) {
					arr.push(this.elements[i].key);
				}
				return arr;
			};
		},
	}
}
</script>

<style>
page {
    font-family: "Microsoft Yahei";
    background-color: #f4f4fc;
}

.u-input {
    background-color: #fff;
}

.u-input,
.label-text {
    padding: 0 20rpx !important;
    box-sizing: border-box;
}

.label-text {
    display: flex;
    align-items: center;
    height: 80rpx;
    font-size: 30rpx;
}

.img-wrap {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
}

.result-text {
    background-color: #fdf6ec;
    color: #f90;
}

.img-box {
    display: flex;
}

.img-item,
.img-item .pre-item-image{
    width: 100%;
    height: 100%;
}

.img-item{
    width: 180rpx;
    height: 180rpx;
    border-radius: 20rpx;
    margin-right: 20rpx;
}

.result-box {
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fdf6ec;
}

/deep/.result-box .parse p {
    line-height: 1.7;
    display: flex;
    flex-direction: column;
}

/deep/.result-box .parse p img {
    /* width: 180rpx !important;
    height: 180rpx !important;
    border-radius: 20rpx !important; */
    margin-top: 20rpx;
}
/deep/.result-box .parse p span img {
    width: 180rpx !important;
    height: 180rpx !important;
    border-radius: 20rpx !important;
}

.img-box .item-img {
    width: 180rpx;
    height: 180rpx;
    border-radius: 20rpx;
    position: relative;
    margin-right: 10rpx;
}

.img-box .item-img .closed {
    position: absolute;
    top: 0;
    right: 0;
    color: #fff;
    font-size: 36rpx;
    background-color: rgba(0, 0, 0, 0.516);
    z-index: 99;
    padding: 0 10rpx;
    box-sizing: border-box;
}

.img-box .item-img .imgs {
    width: 100%;
    height: 100%;
}

.img-box .item-img .looks {
    width: 100%;
    height: 50rpx;
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    font-size: 30rpx;
    background-color: rgba(0, 0, 0, 0.516);
    z-index: 999;
    text-align: center;
    line-height: 50rpx;
}

.submit_btn {
    width: 55%;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 36rpx;
    background: #71d5a1;
    border: none;
    color: #fff;
    border-radius: 50rpx;
    box-shadow: 0 10rpx 30rpx #BFD7DB;
    position: fixed;
    bottom: 300rpx;
    left: 50%;
    transform: translateX(-50%);
}
</style>